<template>
  <div>
    <div class="table-area">
      <div class="filter-line">
        <span> {{ "History" }}</span>
        <div class="btn-area">
          <el-button :icon="Filter">Filter</el-button>
          <el-button :icon="Download">Export</el-button>
        </div>
      </div>
    </div>

    <el-table
      ref="tableRef"
      row-key="maintenanceTeam"
      :data="tableData"
      style="width: 100%"
      height="650px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />

      <el-table-column prop="createdAt" label="Created At" width="160" />
      <el-table-column prop="createdBy" label="Created By" width="160" />
      <el-table-column prop="eventType" label="Event Type" width="160" />
      <el-table-column
        prop="eventDescription"
        label="Event Description"
        width="160"
      />

      <el-table-column
        prop="tableName"
        label="table Name"
        width="160"
        column-key="tableName"
        :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]"
        :filter-method="filterHandler"
      />


      <el-table-column
        prop="columnName"
        label="Column Name"
        width="160"
        column-key="columnName"
        :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]"
        :filter-method="filterHandler"
      />

    
      <el-table-column
        prop="oldValue"
        label="Old Value"
        width="160"
        column-key="oldValue"
        :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]"
        :filter-method="filterHandler"
      />
      <el-table-column
        prop="newValue"
        label="New Value"
        width="160"
        column-key="newValue"
        :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]"
        :filter-method="filterHandler"
      />
       <el-table-column
        prop="denied"
        label="Denied"
        width="160"
        column-key="denied"
        :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]"
        :filter-method="filterHandler"
      />
        <el-table-column
        prop="deniedReason"
        label="Denied Reason"
        width="160"
        column-key="deniedReason"
        :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]"
        :filter-method="filterHandler"
      />
    </el-table>

    <!-- 分页组件 -->
    <div class="pageArea">
      <pageComponents
        :needTotal="sendtotal"
        @sendCurpageNum="CurpageNumFn"
        @everyPageCount="everyPageCountFn"
      ></pageComponents>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import {
  Edit,
  Search,
  Share,
  Upload,
  Filter,
  Delete,
  Download,
  Plus,
} from "@element-plus/icons-vue";
// 表格的相关引入
import { ref } from "vue";
import { ElTable } from "element-plus";
import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import pageComponents from "../components/pageComponents.vue"; //分页组件
const tableRef = ref();

export default {
  components: {
    Search,
    Delete,
    Filter,
    Download,
    Plus,
    pageComponents,
  },
  setup() {
    const state = reactive({
      count: 0,
      chooseMenu: ["Team Management", "User Management"],
      activeName: "TeamManagement", //被激活的菜单
      activeLabel: "Audit Logs",
      tableData: [
        {
          maintenanceTeam: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
          tag: "Home",
        },
        {
          maintenanceTeam: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
          tag: "Office",
        },
        {
          maintenanceTeam: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
          tag: "Home",
        },
        {
          maintenanceTeam: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
          tag: "Office",
        },
      ],
      multipleSelection: [], //被选中的选项
      currentPage4: 4, //当前页数，支持 v-model 双向绑定
      pageSize4: 100, //每页尺寸

      sendtotal: 300, //总条数
    });

    // 被激活的菜单
    function handleClick(tab, event) {
      //   console.log(tab.props.label); //被选中的选项
      state.activeLabel = tab.props.label;
    }
    // 数据筛选
    const filterHandler = (value, row, column) => {
      console.log(value, "数据过滤");
      const property = column["property"];
      return row[property] === value;
    };

    // 勾选的选项
    const handleSelectionChange = (val) => {
      let data = JSON.parse(JSON.stringify(val));
      console.log(data, "选择的数据");
    };
    // 儿子传递过来的 参数
    function CurpageNumFn(params) {
      console.log(params, "当前页");
    }
    function everyPageCountFn(params) {
      console.log(params, "每页多少条");
    }
    return {
      ...toRefs(state),
      handleClick,
      Search,
      Delete,
      Filter,
      Download,
      Plus,
      handleSelectionChange,
      CurpageNumFn,
      everyPageCountFn,
      filterHandler,
    };
  },
};
</script>

<style lang="scss" scoped>
//去掉默认的table选择
::v-deep .el-tabs__content {
  display: none;
}
//第一行搜索框
.filter-line {
  display: flex;
  justify-content: space-between;
  background: #fff;
  height: 60px;
  align-items: center;
  box-sizing: border-box;
  padding: 0 16px;
}
//btn-area  按钮样式
.filter-line .el-button {
  background: #3bcbbc;
  border: none;
  color: white;
}
//删除按钮的样式

.pageArea {
  margin-top: 16px;
}
</style>